<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .div1{
            width: 100%;
            height: 1500px;
            background: silver;
        }
        .son1{
            width: 100%;
            height: 120px;
            background: #2fff3d;
        }
        .son2{
            width: 1200px;
            height: 500px;
            background: #c8dbff;
            margin: 0 auto;
        }
        .son3{
            width: 1200px;
            height: 200px;
            background: #ffb7a7;
            margin: 0 auto;
        }
    </style>
</head>
<body>


<!--component:组件-->
<!--所谓的Vue组件: 就是Vue对象  (一个Vue组件就是一个Vue对象)
    所谓组件化的页面实现手法:  把一个页面拆成若干小模块, 让每一个模块被一个Vue对象负责处理, 最终把不同的vue对象组装起来构成一个大的完整的页面
-->

    <div id="root" class="div1"></div>

    <script>

        var son1 = {
            template: "<div class='son1'> son1 </div>"
        }
        var son2 = {
            template: "<div class='son2'> son2 </div>"
        }
        var  son3 = {
            template: "<div class='son3'> son3 </div>"
        }

        new Vue({
            el: "#root",
            components: { // components: 是一个Vue对象中, 用来引入子Vue的一个模块
                // 别名: 对象
                xxx: son1,
                son2: son2,
                son3: son3
            },
            template: "<div class='div1'><xxx></xxx><son1></son1><son2></son2><son3></son3></div>"
        })



    </script>



</body>
</html>
